import React from 'react';
import { View, StyleSheet, Text, Switch } from 'react-native';
import { useTheme } from '../theme/ThemeContext';
import Icon from 'react-native-vector-icons/MaterialCommunityIcons';

export const SettingsScreen = () => {
  const { theme, isDark, toggleTheme } = useTheme();

  return (
    <View style={[styles.container, { backgroundColor: theme.colors.background }]}>
      <View
        style={[
          styles.settingItem,
          {
            backgroundColor: theme.colors.card,
            borderColor: theme.colors.border,
          },
        ]}
      >
        <View style={styles.settingContent}>
          <Icon name="theme-light-dark" size={24} color={theme.colors.text} />
          <Text style={[styles.settingText, { color: theme.colors.text }]}>
            深色模式
          </Text>
        </View>
        <Switch value={isDark} onValueChange={toggleTheme} />
      </View>

      <View style={styles.aboutSection}>
        <Text style={[styles.aboutTitle, { color: theme.colors.text }]}>
          关于应用
        </Text>
        <Text style={[styles.aboutText, { color: theme.colors.grey }]}>
          时间管理助手 v1.0.0
        </Text>
        <Text style={[styles.aboutText, { color: theme.colors.grey }]}>
          帮助你更好地管理和记录时间
        </Text>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 16,
  },
  settingItem: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    padding: 16,
    borderRadius: 12,
    borderWidth: 1,
  },
  settingContent: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  settingText: {
    fontSize: 16,
    marginLeft: 12,
  },
  aboutSection: {
    marginTop: 32,
  },
  aboutTitle: {
    fontSize: 18,
    fontWeight: 'bold',
    marginBottom: 8,
  },
  aboutText: {
    fontSize: 14,
    marginBottom: 4,
  },
}); 